<template>
  <div class="interdisciplinary-card">
    <div class="card-header">
      <h3>跨学科能力分析</h3>
      <el-tag size="small" type="warning">能力评估</el-tag>
    </div>
    <div class="card-content">
      <div class="line-chart" ref="lineChart"></div>
      <div class="skills-analysis">
        <h4>核心能力评估</h4>
        <div class="skills-grid">
          <div class="skill-item">
            <div class="skill-header">
              <el-icon><Monitor /></el-icon>
              <span>计算思维</span>
            </div>
            <div class="skill-progress">
              <div class="progress" :style="{ width: '92%' }"></div>
              <span>92%</span>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-header">
              <el-icon><Reading /></el-icon>
              <span>学科交叉</span>
            </div>
            <div class="skill-progress">
              <div class="progress" :style="{ width: '88%' }"></div>
              <span>88%</span>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-header">
              <el-icon><Operation /></el-icon>
              <span>创新应用</span>
            </div>
            <div class="skill-progress">
              <div class="progress" :style="{ width: '85%' }"></div>
              <span>85%</span>
            </div>
          </div>
          <div class="skill-item">
            <div class="skill-header">
              <el-icon><User /></el-icon>
              <span>团队协作</span>
            </div>
            <div class="skill-progress">
              <div class="progress" :style="{ width: '90%' }"></div>
              <span>90%</span>
            </div>
          </div>
        </div>
      </div>
      <div class="recommendations">
        <h4>发展建议</h4>
        <div class="recommendation-list">
          <div class="recommendation-item">
            <el-icon color="#67C23A"><CirclePlus /></el-icon>
            <div class="content">
              <h5>跨学科课程学习</h5>
              <p>建议选修数据科学、人工智能等交叉学科课程</p>
            </div>
          </div>
          <div class="recommendation-item">
            <el-icon color="#67C23A"><CirclePlus /></el-icon>
            <div class="content">
              <h5>实践项目参与</h5>
              <p>积极参与跨学科研究项目，提升实践能力</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'
import { Monitor, Reading, Operation, User, CirclePlus } from '@element-plus/icons-vue'

const lineChart = ref(null)

onMounted(() => {
  const chart = echarts.init(lineChart.value)
  const option = {
    backgroundColor: 'transparent',
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      data: ['当前水平', '目标水平'],
      textStyle: {
        color: '#fff'
      },
      top: 0
    },
    grid: {
      top: '15%',
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['计算思维', '数据分析', '创新能力', '协作能力', '表达能力'],
      axisLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      }
    },
    yAxis: {
      type: 'value',
      max: 100,
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.2)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255, 255, 255, 0.1)'
        }
      },
      axisLabel: {
        color: '#fff',
        fontSize: 12
      }
    },
    series: [
      {
        name: '当前水平',
        type: 'line',
        data: [92, 85, 88, 90, 86],
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#409EFF',
          width: 3
        },
        itemStyle: {
          color: '#409EFF'
        },
        areaStyle: {
          color: {
            type: 'linear',
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [{
              offset: 0,
              color: 'rgba(64,158,255,0.2)'
            }, {
              offset: 1,
              color: 'rgba(64,158,255,0)'
            }]
          }
        }
      },
      {
        name: '目标水平',
        type: 'line',
        data: [95, 92, 93, 94, 90],
        smooth: true,
        symbol: 'circle',
        symbolSize: 8,
        lineStyle: {
          color: '#67C23A',
          width: 3
        },
        itemStyle: {
          color: '#67C23A'
        }
      }
    ]
  }
  chart.setOption(option)
})
</script>

<style lang="less" scoped>
.interdisciplinary-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 20px;

  .card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);

    h3 {
      color: #fff;
      margin: 0;
      font-size: 18px;
      font-weight: 500;
    }
  }

  .card-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;

    .line-chart {
      height: 260px;
      margin-bottom: 10px;
    }

    .skills-analysis {
      h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 15px 0;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: #E6A23C;
        }
      }

      .skills-grid {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;

        .skill-item {
          background: rgba(255, 255, 255, 0.05);
          padding: 12px;
          border-radius: 8px;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }

          .skill-header {
            display: flex;
            align-items: center;
            gap: 8px;
            margin-bottom: 10px;

            .el-icon {
              font-size: 20px;
              color: #E6A23C;
            }

            span {
              color: #fff;
              font-size: 14px;
            }
          }

          .skill-progress {
            position: relative;
            height: 4px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 2px;

            .progress {
              position: absolute;
              left: 0;
              top: 0;
              height: 100%;
              background: linear-gradient(90deg, #E6A23C, #F56C6C);
              border-radius: 2px;
              transition: width 0.3s ease;
            }

            span {
              position: absolute;
              right: 0;
              top: -20px;
              font-size: 12px;
              color: rgba(255, 255, 255, 0.7);
            }
          }
        }
      }
    }

    .recommendations {
      h4 {
        color: #fff;
        font-size: 16px;
        margin: 0 0 15px 0;
        display: flex;
        align-items: center;
        gap: 8px;

        .el-icon {
          color: #E6A23C;
        }
      }

      .recommendation-list {
        display: flex;
        flex-direction: column;
        gap: 12px;

        .recommendation-item {
          display: flex;
          align-items: flex-start;
          gap: 12px;
          background: rgba(255, 255, 255, 0.05);
          padding: 12px;
          border-radius: 8px;
          transition: all 0.3s ease;

          &:hover {
            background: rgba(255, 255, 255, 0.1);
          }

          .el-icon {
            font-size: 20px;
            flex-shrink: 0;
          }

          .content {
            h5 {
              color: #fff;
              font-size: 14px;
              margin: 0 0 4px 0;
            }

            p {
              color: rgba(255, 255, 255, 0.7);
              font-size: 12px;
              margin: 0;
              line-height: 1.4;
            }
          }
        }
      }
    }
  }
}
</style> 